<template>
	<div class="container">
		<el-table
			:max-height="tableHeight"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			border
			:data="list"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			header-align="center"
		>
			<el-table-column
				label="玩家ID"
				min-width="160"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span style="color:#aaaaaa">
						{{ scope.row.userId || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="昵称"
				min-width="150"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.nickName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				label="聊天类型"
				min-width="150"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						getTypeName(
							scope.row.chatContentType,
							chatContentTypeArr
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="聊天内容"
				min-width="400"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{ scope.row.content || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="发送时间"
				min-width="160"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{ parseTime(scope.row.sendTime) || '-' }}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			class="pageValue"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="$store.getters.pageSizes"
			:total="total"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		tableHeight: { type: [String, Number], default: 480 },
		queryData: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		activeIdx: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			chatContentTypeArr: [
				{ code: 1, description: '弹幕' },
				{ code: 2, description: '短语' },
				{ code: 3, description: '表情' },
				{ code: 4, description: '语音聊天' },
				{ code: 5, description: '互动道具' },
				{ code: 6, description: '弹幕' }
			]
		}
	},
	methods: {
		loadData() {
			this.list = []
			if (this.queryData.id && Number(this.activeIdx) === 3) {
				let params = {
					tableCode: this.queryData.id
				}
				params = this.getParams(params)
				this.loading = true
				this.$emit('changeDisabledSearch', true)
				this.$api
					.getTableChatRecordListBend(params)
					.then((res) => {
						const { record, totalRecord } = res.data || {}
						this.list = Array.isArray(record) ? record : []
						this.total = totalRecord
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false
						this.$emit('changeDisabledSearch', false)
					})
			}
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>
